<!doctype html>
<!--
  @license
  Copyright (c) 2021 The Polymer Project Authors. All rights reserved.
  This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  Code distributed by Google as part of the polymer project is also
  subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  -->
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"
    />
    <title>Simple List Animation</title>
  </head>
  <body>
    <style>
      html,
      body {
        margin: 0;
        font-family: sans-serif;
      }
      main {
        padding: 0 16px;
      }
    </style>
    <h2>Simple List Animation</h2>
    <main>
      <my-element></my-element>
    </main>
    <script type="module">
      import {LitElement, html, css} from 'lit';
      import {repeat} from 'lit/directives/repeat.js';
      import {flip, defaultCssProperties} from '../development/flip.js';

      class MyElement extends LitElement {
        static properties = {
          shifted: {},
          moving: {},
          items: {},
        };

        static styles = css`
          * {
            box-sizing: border-box;
          }
          :host {
            background: yellow;
          }
          .item {
            font-weight: bold;
            background: #ff8888;
            color: #aa0000;
            border-radius: 10px;
            padding: 12px;
            margin: 8px;
            width: 240px;
          }
        `;

        constructor() {
          super();
          this.items = ['one', 'two', 'three', 'four'];
        }

        render() {
          return html`
            <button @click=${this.shuffle}>Shuffle</button>
            <h2>Items</h2>
            ${repeat(
              this.items,
              (i) => i,
              (i) => html` <div class="item" ${flip()}>${i}</div> `
            )}
          `;
        }

        shuffle() {
          this.items = shuffleArray(this.items);
        }
      }

      customElements.define('my-element', MyElement);

      const shuffleArray = (arr) => {
        while (true) {
          // We force there to be some change for the demo
          let changes = false;
          const array = [...arr];
          let currentIndex = array.length;
          // While there remain elements to shuffle...
          while (0 !== currentIndex) {
            // Pick a remaining element...
            const randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex -= 1;

            if (randomIndex !== currentIndex) {
              changes = true;
              // And swap it with the current element.
              const tmp = array[currentIndex];
              array[currentIndex] = array[randomIndex];
              array[randomIndex] = tmp;
            }
          }
          if (changes) {
            return array;
          }
        }
      };
    </script>
  </body>
</html>
